<script setup lang="ts">
import type { Props } from './utils/types'

defineOptions({
    name: 'ItemAlbum'
})

withDefaults(defineProps<Props>(), {
    height: '170px'
})

const $emit = defineEmits(['on-click-btn'])

function handleEnterAlbum() {
    $emit('on-click-btn')
}

</script>

<template>
    <div class="item-album" :style="{ height }">
        <img v-if="image" :src="image" alt="背景图" />
        <img v-else src="./images/bg.png" alt="背景图" />
        <div class="item-album-content">
            <div class="title">{{ title }}</div>
            <button class="btn" @click="handleEnterAlbum">进入专辑</button>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.item-album {
    position: relative;
    border-radius: 5px;
    overflow: hidden;

    >img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .item-album-content {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        left: 0;

        &:hover .btn {
            display: block;
        }

        .btn {
            display: none;
            margin-top: 10px;
            border: 1px solid #ffffff;
            background-color: transparent;
            color: #ffffff;
            padding: 0 8px;
            border-radius: 5px;
            font-size: 13px;
            line-height: 28px;
            cursor: pointer;
            width: 70px;
            height: 30px;
            white-space: nowrap;
        }

        .title {
            color: #ffffff;
            color: rgba(255, 255, 255, 1);
            font-size: 24px;
            text-align: center;
            margin-top: -10px;
        }
    }
}
</style>